<template>
  <div>
    <!-- <van-search v-model="searchValue" shape="round" background="#ee0a24" placeholder="请输入搜索关键词" /> -->
    <HeaderSearch></HeaderSearch>

    <div class="g-banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.index">
          <img :src="item.url" alt="item" style="width: 100%; height: 185px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="g-hot">
      <van-grid column-num="5" icon-size="35" clickable="true">
        <van-grid-item
          v-for="item in hotList"
          :key="item.id"
          :icon="item.url"
          :text="item.text"
          :to  ="item.details"
        />
      </van-grid>
    </div>
    <van-dropdown-menu active-color="#1989fa" @click="change">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" >
	<!-- <div style="padding: 5px 16px;">
      <van-button type="danger" block round @click="onConfirm">
        确认
      </van-button>
    </div> -->
	</van-dropdown-item>
    </van-dropdown-menu>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="g-product-list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="item in productList"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            :title="item.product"
            :thumb="item.picture"
            :origin-price="item.oldprice"
            @click-thumb="onDetail(item.id)"
          >
            <template #tags>
              <van-tag plain type="danger">限时折扣</van-tag>
            </template>
            <template #footer>
              <v-button size="large" @click="onDetail(item.id)">
				赶快抢购
			</v-button>
            </template>
          </van-card>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import {
  useBanner,
  useProductDetail,
  useHotProduct,
} from "@/hooks/home";
import HeaderSearch from "@/components/HeaderSearch.vue";
import { ref,type Ref} from "vue";
import type { IProduct } from "@/types/Types";
import { RequestProductList } from "@/api/product";
const { bannerList } = useBanner();
// const {value1,value2,option1,option2} = useDropdownMenu();
// const { onRefresh, onLoad, productList, loading, finished ,goodsList} = useProductList();
const { onDetail } = useProductDetail();
const { hotList } = useHotProduct();




const loading: Ref<boolean> = ref(false);
  const finished: Ref<boolean> = ref(false);
  let goodsList:[] =[]
  let productList: Ref<Array<IProduct>> = ref([]);
  let currentNo: number = 1; //当前页号

  const getProductList = async (pageNo: number, pageSize: number) => {
    let data = await RequestProductList(pageNo, pageSize);
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      // list.value = [...list.value,...resultInfo.list]

	// // console.log(array1,'arr>>>>>>>');
    //   productList.value = productList.value.concat(resultInfo.list);
       goodsList = goodsList.concat(resultInfo.list);

    }
    // 加载状态结束
    loading.value = false;
    if (resultCode == -1) {
      finished.value = true;
    }
  };

  /**
   * 加载更多
   */
  const onLoad = () => {
    // 第一次加载和组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
    // 注：当数据不在一屏时，会一直触发onLoad
	
    getProductList(currentNo++, 10);
    productList.value =goodsList
	console.log(goodsList,'333333333333333333333');

  };

  /**
   * 下拉刷新
   */
  const onRefresh = () => {
    goodsList = [];
	productList.value =[]
    finished.value = false;
    getProductList(1, 10);
	console.log(goodsList,'fresh');
	productList.value =goodsList
	
	
  };






  const value1 = ref(0);
  const value2 = ref("a");
  const option1 = [
    { text: "全部商品", value: 0 },
    // { text: "新款商品", value: 1 },
    // { text: "活动商品", value: 2 },
  ];
  const option2 = [
    { text: "默认排序", value: "a" },
    { text: "价格排序", value: "b" },
  ];
const change=()=>{
	paixu()
	
}

const paixu =()=>{
	let arr = Object.values(value2)
    let arr1=arr.slice(4,5)
    let guanjianci = arr1.toString()
	const sortBykey =(arr, key)=> {
		return arr.sort(function (a, b) {
		var x = a[key]; //如果要从大到小,把x,y互换就好
		var y = b[key];
		return x < y ? -1 : x > y ? 1 : 0;
		});
		};
		const sortBykey1 =(arr, key)=> {
		return arr.sort(function (a, b) {
		var y = a[key]; //如果要从大到小,把x,y互换就好
		var x = b[key];
		return x < y ? -1 : x > y ? 1 : 0;
		});
		};
		if(guanjianci=='a'){
			// getProductList(currentNo, 10)
			console.log(goodsList,'aaaaaaaaaaaaaaaaaaaaaa');
			
			productList.value = []
			console.log(productList,'aaaaaaaaaaaaaaaaaa11111111111111111111111111');
			
			productList.value = sortBykey1(goodsList, 'id')
		}
	if(guanjianci=='b'){
		// getProductList(currentNo, 10)
		console.log(goodsList,'11111111111111111111111');
		productList.value = []
		productList.value = sortBykey(goodsList, 'price')

	}
}
</script>

<style lang="scss" scoped>
.g-banner {
  box-sizing: border-box;
  margin: 8px;
  margin-top: 3px;
  border-radius: 8px;
  overflow: hidden;
  height: 185px;
}
.g-product-list {
  --van-card-price-color: red;
}
.g-product-list v-button {
  background-color: red;
  color: white;
  border-radius: 3px;
}
</style>
